<div class="page-title chart-container">
  <h1>
         图表
  </h1>
</div>
<div class="row">
  <!-- Line Chart -->
  <div class="col-md-6">
    <div class="widget-container">
      <div class="heading">
        <i class="icon-bar-chart"></i>折线图
      </div>
      <div class="widget-content padded">
        <div class="chart-graph line-chart">
          <div id="linechart-2">
            加载中…
          </div>
          <ul class="chart-text-axis">
            <li>
              1
            </li>
            <li>
              2
            </li>
            <li>
              3
            </li>
            <li>
              4
            </li>
            <li>
              5
            </li>
            <li>
              6
            </li>
            <li>
              7
            </li>
            <li>
              8
            </li>
            <li>
              9
            </li>
            <li>
              10
            </li>
            <li>
              11
            </li>
            <li>
              12
            </li>
          </ul>
          <!-- end Line Chart -->
        </div>
      </div>
    </div>
  </div>
  <!-- Line Chart -->
  <div class="col-md-6">
    <div class="widget-container">
      <div class="heading">
        <i class="icon-bar-chart"></i>条形图
      </div>
      <div class="widget-content padded text-center">
        <div class="chart-graph">
          <div id="barchart-2">
            加载中…
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end Line Chart -->
</div>
<div class="row">
  <!-- Donut Charts -->
  <div class="col-lg-8">
    <div class="widget-container">
      <div class="heading">
        <i class="icon-bar-chart"></i>环形图
      </div>
      <div class="widget-content clearfix">
        <div class="col-sm-4">
          <div class="pie-chart1 pie-chart pie-number" data-percent="87">
            87%
          </div>
        </div>
        <div class="col-sm-4">
          <div class="pie-chart2 pie-chart pie-number" data-percent="26">
            26%
          </div>
        </div>
        <div class="col-sm-4">
          <div class="pie-chart3 pie-chart pie-number" data-percent="54">
            54%
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- end Donut Charts --><!-- Pie Chart -->
  <div class="col-lg-4">
    <div class="widget-container">
      <div class="heading">
        <i class="icon-bar-chart"></i>饼状图
      </div>
      <div class="widget-content padded">
        <div class="pie-chart">
          <div id="pie-chart"></div>
          <ul class="chart-key">
            <li>
              <span class="green"></span>分类一
            </li>
            <li>
              <span class="orange"></span>分类二
            </li>
            <li>
              <span class="red"></span>分类三
            </li>
            <li>
              <span class="blue"></span>分类四
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- end Pie Chart -->
</div>
<div class="row">
  <!-- Composite Graph -->
  <div class="col-lg-6">
    <div class="widget-container">
      <div class="heading">
        <i class="icon-bar-chart"></i>复合图
      </div>
      <div class="widget-content padded text-center">
        <div id="composite-chart-1">
          加载中…
        </div>
      </div>
    </div>
  </div>
  <!-- end Composite Graph --><!-- Composite Graph -->
  <div class="col-lg-6">
    <div class="widget-container">
      <div class="heading">
        <i class="icon-bar-chart"></i>复合图
      </div>
      <div class="widget-content padded">
        <div id="linechart-1">
          加载中…
        </div>
      </div>
    </div>
  </div>
  <!-- end Composite Graph -->
</div>
<!-- Line Chart:Morris -->
<div class="row">
  <div class="col-md-6">
    <div class="widget-container fluid-height">
      <div class="heading">
        <i class="icon-bar-chart"></i>线性图
      </div>
      <div class="widget-content padded text-center">
        <div class="graph-container">
          <div class="caption"></div>
          <div class="graph" id="hero-graph"></div>
          <!-- Line Chart:Morris -->
        </div>
      </div>
    </div>
  </div>
  <!-- Bar Charts:Morris -->        
  <div class="col-md-6">
    <div class="widget-container fluid-height">
      <div class="heading">
        <i class="icon-bar-chart"></i>条形图
      </div>
      <div class="widget-content padded text-center">
        <div class="graph-container">
          <div class="caption"></div>
          <div class="graph" id="hero-bar"></div>
          <!-- Bar Charts:Morris --> 
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <!-- Area Charts:Morris --> 
  <div class="col-md-6">
    <div class="widget-container fluid-height">
      <div class="heading">
        <i class="icon-bar-chart"></i>区域图
      </div>
      <div class="widget-content padded text-center">
        <div class="graph-container">
          <div class="caption"></div>
          <div class="graph" id="hero-area"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- Area Charts:Morris --><!-- Donut Charts:Morris -->
  <div class="col-md-6">
    <div class="widget-container fluid-height">
      <div class="heading">
        <i class="icon-bar-chart"></i>环形图
      </div>
      <div class="widget-content padded text-center">
        <div class="graph-container">
          <div class="caption"></div>
          <div class="graph" id="hero-donut"></div>
        </div>
      </div>
    </div>
  </div>
  <!-- Donut Charts:Morris -->
</div>

<script>
    
var linechartResize;

linechartResize = function() {
$("#linechart-1").sparkline([160, 240, 120, 200, 180, 350, 230, 200, 280, 380, 400, 360, 300, 220, 200, 150, 40, 70, 180, 110, 200, 160, 200, 220], {
  type: "line", 
  width: "100%",
  height: "226",
  lineColor: "#a5e1ff",
  fillColor: "rgba(241, 251, 255, 0.9)",
  lineWidth: 2,
  spotColor: "#a5e1ff",
  minSpotColor: "#bee3f6",
  maxSpotColor: "#a5e1ff",
  highlightSpotColor: "#80cff4",
  highlightLineColor: "#cccccc",
  spotRadius: 6,
  chartRangeMin: 0
});
$("#linechart-1").sparkline([100, 280, 150, 180, 220, 180, 130, 180, 180, 280, 260, 260, 200, 120, 200, 150, 100, 100, 180, 180, 200, 160, 180, 120], {
  type: "line",
  width: "100%",
  height: "226",
  lineColor: "#cfee74",
  fillColor: "rgba(244, 252, 225, 0.5)",
  lineWidth: 2,
  spotColor: "#b9e72a",
  minSpotColor: "#bfe646",
  maxSpotColor: "#b9e72a",
  highlightSpotColor: "#b9e72a",
  highlightLineColor: "#cccccc",
  spotRadius: 6,
  chartRangeMin: 0,
  composite: true
});
$("#linechart-2").sparkline([160, 240, 250, 280, 300, 250, 230, 200, 280, 380, 400, 360, 300, 220, 200, 150, 100, 100, 180, 180, 200, 160, 220, 140], {
  type: "line",
  width: "100%",
  height: "226",
  lineColor: "#a5e1ff",
  fillColor: "rgba(241, 251, 255, 0.9)",
  lineWidth: 2,
  spotColor: "#a5e1ff",
  minSpotColor: "#bee3f6",
  maxSpotColor: "#a5e1ff",
  highlightSpotColor: "#80cff4",
  highlightLineColor: "#cccccc",
  spotRadius: 6,
  chartRangeMin: 0
});
$("#linechart-3").sparkline([100, 280, 150, 180, 220, 180, 130, 180, 180, 280, 260, 260, 200, 120, 200, 150, 100, 100, 180, 180, 200, 160, 220, 140], {
  type: "line",
  width: "100%",
  height: "226",
  lineColor: "#cfee74",
  fillColor: "rgba(244, 252, 225, 0.5)",
  lineWidth: 2,
  spotColor: "#b9e72a",
  minSpotColor: "#bfe646",
  maxSpotColor: "#b9e72a",
  highlightSpotColor: "#b9e72a",
  highlightLineColor: "#cccccc",
  spotRadius: 6,
  chartRangeMin: 0
});
$("#linechart-4").sparkline([100, 220, 150, 140, 200, 180, 130, 180, 180, 210, 240, 200, 170, 120, 200, 150, 100, 100], {
  type: "line",
  width: "100",
  height: "30",
  lineColor: "#adadad",
  fillColor: "rgba(244, 252, 225, 0.0)",
  lineWidth: 2,
  spotColor: "#909090",
  minSpotColor: "#909090",
  maxSpotColor: "#909090",
  highlightSpotColor: "#666",
  highlightLineColor: "#666",
  spotRadius: 0,
  chartRangeMin: 0
});
$("#linechart-5").sparkline([100, 220, 150, 140, 200, 180, 130, 180, 180, 210, 240, 200, 170, 120, 200, 150, 100, 100], {
  type: "line",
  width: "100",
  height: "30",
  lineColor: "#adadad",
  fillColor: "rgba(244, 252, 225, 0.0)",
  lineWidth: 2,
  spotColor: "#909090",
  minSpotColor: "#909090",
  maxSpotColor: "#909090",
  highlightSpotColor: "#666",
  highlightLineColor: "#666",
  spotRadius: 0,
  chartRangeMin: 0
});
$("#barchart-2").sparkline([160, 220, 260, 120, 320, 260, 300, 160, 240, 100, 240, 120], {
  type: "bar",
  height: "226",
  barSpacing: 8,
  barWidth: 18,
  barColor: "#8fdbda"
});
$("#composite-chart-1").sparkline([160, 220, 260, 120, 320, 260, 300, 160, 240, 100, 240, 120], {
  type: "bar",
  height: "226",
  barSpacing: 8,
  barWidth: 18,
  barColor: "#8fdbda"
});
return $("#composite-chart-1").sparkline([100, 280, 150, 180, 220, 180, 130, 180, 180, 280, 260, 260], {
  type: "line",
  width: "100%",
  height: "226",
  lineColor: "#cfee74",
  fillColor: "rgba(244, 252, 225, 0.5)",
  lineWidth: 2,
  spotColor: "#b9e72a",
  minSpotColor: "#bfe646",
  maxSpotColor: "#b9e72a",
  highlightSpotColor: "#b9e72a",
  highlightLineColor: "#cccccc",
  spotRadius: 6,
  chartRangeMin: 0,
  composite: true
});
};
    
function initChartsPage() {
    SparklineLinechart();
    EasyPieChart();
    MorrisChart();
    
    
    /*
    # =============================================================================
    #   Sparkline Resize Script
    # =============================================================================
    */
    linechartResize();
    $(window).resize(function() {
      return linechartResize();
    });
    
}
    
$(document).ready(function() {
	LoadChartsScript(initChartsPage);
});
</script>